<template>
		<div class="citys">
			<van-index-bar :index-list="indexList" highlight-color='blue' @select='light'>
			  <van-index-anchor v-for="item in cityList" :key='item.type' :index="item.type">{{item.type}}
			  <van-cell v-for='suoyin in item.list' :key='suoyin.cityId' :title="suoyin.name" @click='changeCityName(suoyin.name,suoyin.cityId)'/>
			  </van-index-anchor>
			</van-index-bar>
		</div>
</template>

<script>
	import http from '../util/http.js'
	import obj from '@/util/mixIn.js'
	import { Toast } from 'vant'
	import { mapState, mapMutations, mapActions } from 'vuex'
	export default{
		mixins:[obj],
		data(){
			return{
				cityList:[]
			}
		},
		computed:{
			indexList(){
				var citySearch = this.cityList.map(item => item.type);
				return citySearch;
			}
		},
		methods:{
			toAgular(list){
				var cityList =[];
				var letterList = [];
				for(var i = 65; i < 91; i++){
					letterList.push(String.fromCharCode(i))    //将26个字母装进一个数组
				}
				letterList.forEach(letter => {
					var newList = list.filter(item => item.pinyin.substring(0, 1). toUpperCase() == letter)  //每次把一堆首字母相同的元素放进一个数组
					if(newList.length >0)
						cityList.push({               //将该数组赋给新数组
							type: letter,
							list: newList
						})
				})
				return cityList;
			},
			light(data){
				Toast(data);
			},
			changeCityName(name,id){
				this.$store.commit('changeCityName',name);
				this.$store.commit('changeCityId',id);
				this.$router.back();
			}
		},
		mounted() {
			http({
				url:'/gateway?k=7475973',
				headers:{
					'X-Host':'mall.film-ticket.city.list'
				}
				}).then(res => {
						this.cityList = this.toAgular(res.data.data.cities);
					})
		}
	}
</script>

<style>
	.citys{
		margin-bottom: 0.625rem;
	}
	.van-index-bar{
		overflow: hidden;
	}
	.van-index-anchor{
		margin-bottom: 3.75rem;
	}
	.van-toast--text, .van-toast--html{
		min-width: 0;
	}
</style>
